<template>
	<div id="mse" style="width: 100%; height: 100%" ref="hlsEl"></div>
</template>

<script setup lang="ts">
import remoteLoad from '@/utils/remoteLoad'


const props = withDefaults(defineProps<{
	src: string
	height?: string
	poster?: string
	autoplay?:boolean
}>(),{
	autoplay:true
}) 

const hlsEl = ref(null)
let play = null
const initMap = () => {
	let url = props.src?.replaceAll('&amp;', '&')
	if (props.src?.includes('.m3u8')) {
		play = new window.HlsJsPlayer({
			el: hlsEl.value,
			url: url,
			isLive: true,
			autoplay: props.autoplay,
			playsinline: true,
			poster: props.poster,
			// fitVideoSize: 'auto',
			fluid: true
		})
	} else if(props.src?.includes('.flv')){
		play = new window.FlvPlayer({
			el: hlsEl.value,
			url: url,
			isLive: true,
			autoplay: props.autoplay,
			playsinline: true,
			poster: props.poster,
			// fitVideoSize: 'auto',
			fluid: true
		})
	}else {
		play = new window.Player({
			el: hlsEl.value,
			url: props.src,
			autoplay: true,
			playsinline: true,
			poster: props.poster,
			// fitVideoSize: 'auto',
			fluid: true
		})
	}

	document.getElementById('mse').style.width = '100%'
}
onMounted(async () => {
	if (window.HlsJsPlayer&&window.FlvPlayer) {
		nextTick(() => {
			initMap()
		})
		return
	}
	await remoteLoad(`//unpkg.byted-static.com/xgplayer/2.31.6/browser/index.js`)
	await remoteLoad(`//unpkg.byted-static.com/xgplayer-hls.js/2.2.2/browser/index.js`)
	await remoteLoad(`//unpkg.byted-static.com/xgplayer-flv/2.5.1/dist/index.min.js`)
	initMap()
})

onUnmounted(() => {
	play && play.destroy(true)
	window.HlsJsPlayer = null
	window.FlvPlayer = null
})
</script>

<style scoped></style>
